<template>
	<view>
		<u-tabs
			:list="splist" 
			:height="80" 
			name="categoryName"  
			:active-color="'#EF7B3A'"	
			:is-scroll="(splist.length <= 4 ? false : true)" 
			:current="current" 
			@change="handleTabChange" 
			style="width: 100%;"
			:transition="tabTransition"
		></u-tabs>
		<view class="coupon_list">
			<view class="coupon_item" v-for="(item,index) in coupon_list" :key="index">
				<view class="ordernumber">
					 <view>提交时间：{{item.updateTime | formatDate}}</view>
					 <view>{{current == 0 ? '审核中' : ( current == 1 ? '已过审' : '未过审')}}</view>
				</view>
                 <view class="content">
					 <view class="coupon_img">
					 	<image :src="item.pics[0].picUrl" mode=""></image>
					 </view>
					 <view class="ifom">
						 <view class="name">消费金额：￥{{item.amount}}</view>
						 <view class="period" v-if="current != 2">
						 	{{current == 0 ? '预计积分' : '新增积分'}}：{{ current == 1 ? item.credit : item.evaluateCredit }}分
						 </view>
						 <view class="bohx" v-if="current == 2">
						  <view>退款失败原因：</view>
						  <view style="flex: 1;">{{item.reason}}</view>
						 </view>
					 </view>
				 </view>
				 <view class="btoom">
					 <view class="time"></view>
					 <view class="msgee">
						 {{current == 0 ? '小票审核中，请耐心等待' : (current == 1 ? '积分已到账' : '')}} 
					 </view>
				 </view>
			</view>
<!-- 			<view class="msg" v-if="coupon_list.length < 1 && requst">
				 空空如也~
			</view> -->
			
			<!-- 加载更多提示 -->
			<view class="load-more" v-if="loading">
				<view class="loading-animation">
					<view class="loading-dot"></view>
					<view class="loading-dot"></view>
					<view class="loading-dot"></view>
				</view>
				<text>加载中...</text>
			</view>
			
			<!-- 没有更多数据 -->
			<view class="no-more-data" v-if="!loading && !hasMore && requst">
				<text>没有更多数据了</text>
			</view>
		</view>
	</view>
</template>

<script>
	import index from '../../store';
	import { receiptpage } from '@/core/api/index.js'
	import { mapState } from 'vuex';
	
	export default{
		computed: {
		  ...mapState({
		    userInfo: state => state.user.userInfo
		  })
		},
		data(){
			return{
				current:0,
				splist:[
					{
						categoryName:'审核中'
					},
					{
						categoryName:'已过审'
					},
					{
						categoryName:'未过审'
					}
				],
				coupon_list:[],
				writeOffStatus:0,
				isExpired:0,
				requst:false,
				total:0,
				currentPage: 1,
				pageSize: 10,
				hasMore: true,
				loading: false
			}
		},
		onLoad() {
			this.userCouponpage()
		},
		onReachBottom() {
			// 页面触底时加载更多
			if (!this.loading && this.hasMore) {
				this.loadMoreReceipts()
			}
		},
		methods:{
			handleTabChange(index){
				this.current = index
				if(index == 1){
					this.writeOffStatus = 1
					this.isExpired = 0
				}else if(index == 2){
					this.writeOffStatus = 0 
					this.isExpired = 1
				}else{
					this.writeOffStatus = 0
					this.isExpired = 0
				}
				// 切换标签时重置分页
				this.resetPagination()
				this.userCouponpage()
			},
			Card(id){
				uni.navigateTo({
					url:'/pages/coupon/cardverification?id=' + id
				})
			},
			resetPagination() {
				this.currentPage = 1
				this.hasMore = true
				this.coupon_list = []
				this.requst = false
			},
			async userCouponpage() {
				this.loading = true
				
				try {
					let prmes = {
						page: this.currentPage,
						size: this.pageSize,
						condition: {
							// userId: this.userInfo.id,
							auditStatus: this.current 
						}
					}
					
					const { data } = await receiptpage(prmes)	
					console.log('获取小票列表:', data)
					
					this.total = data.total || 0
					
					if (this.currentPage === 1) {
						// 首次加载或刷新
						this.coupon_list = data.records || []
					} else {
						// 加载更多
						this.coupon_list = [...this.coupon_list, ...data.records]
					}
					
					// 判断是否还有更多数据
					this.hasMore = this.coupon_list.length < this.total
					this.requst = true
					
				} catch (error) {
					console.error('获取小票列表失败:', error)
				} finally {
					this.loading = false
				}
			},
			loadMoreReceipts() {
				if (this.loading || !this.hasMore) return
				
				this.currentPage++
				this.userCouponpage()
			}
		}
	}
</script>

<style lang="scss">
	.msg{
		margin: 100rpx auto;
		text-align: center;
	}
	.coupon_list{
		padding: 20rpx 30rpx;
		.coupon_item{
			background-color: #fff;
			border-radius: 10rpx;
			margin-top: 15rpx;
			.ordernumber{
				display: flex;
				justify-content: space-between;
				padding: 22rpx 25rpx 22rpx 15rpx;
				view:nth-child(1){
					font-size: 24rpx;
					color: #A1A1A1;
				}
				color: var(--Color, #F26B2E);
				font-size: 28rpx;
				border-bottom: 1rpx solid #F3F3F3;
			}
			.content{
				padding: 30rpx 20rpx;
				display: flex;
				align-items: center;
			}
			.coupon_img{
				width: 120rpx;
				height: 120rpx;
				image{
					width: 100%;
					border-radius: 10rpx;
					height: 100%;
				}
			}
			.ifom{
				margin-left: 20rpx;
				flex: 1;
				.name{
					font-size: 28rpx;
					font-weight: 700;
					width: fit-content;
					margin-bottom: 20rpx;
					position: relative;
				}
				.period{
					font-size: 28rpx;
					color: #757575;
				}
			}
			.bohx{
				font-size: 24rpx;
				color: #F26B2E;
				display: flex;
				padding: 0 0rpx;
				padding-bottom: 25rpx;
				view{
					// width: 200rpx;
					// color: #333;
				}
			}
			
		}
		.btoom{
			display: flex;
			padding: 15rpx 25rpx 15rpx 15rpx;
			justify-content: space-between;
			align-items: center;
			border-top: 1rpx solid #F8F8F8;
			.msgee{
				font-size: 24rpx;
				color: #000;
			}
		}
	}
	
	/* 加载更多样式 */
	.load-more {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
		color: #999;
		font-size: 26rpx;
	}
	
	.loading-animation {
		display: flex;
		margin-bottom: 10rpx;
	}
	
	.loading-dot {
		width: 16rpx;
		height: 16rpx;
		margin: 0 8rpx;
		background-color: #F26B2E;
		border-radius: 50%;
		animation: loading 1.4s infinite ease-in-out both;
	}
	
	.loading-dot:nth-child(1) {
		animation-delay: -0.32s;
	}
	
	.loading-dot:nth-child(2) {
		animation-delay: -0.16s;
	}
	
	@keyframes loading {
		0%, 80%, 100% { transform: scale(0); }
		40% { transform: scale(1); }
	}
	
	/* 没有更多数据 */
	.no-more-data {
		text-align: center;
		padding: 30rpx 0;
		color: #999;
		font-size: 26rpx;
	}
</style>